<template>
    <div class="processOverview">
        <div>
            <div class="processOverview-screenName">
                <a-input  class="rx-inputs" v-model="screenName" @pressEnter="handClose" :placeholder="i18n('searchBpm','搜索流程')"/>
                <span class="handClose" @click="handClose">
                      <a-icon type="search" />
                </span>
            </div>
        </div>
        <a-tabs class="processOverview" v-model="tabsKey" :defaultActiveKey="tabsKey">
            <a-tab-pane key="1">
              <span slot="tab"><my-icon type="iconVue3jpaas-icon_liucheng" style="font-size: 16px"></my-icon><span style="font-size: 16px;font-weight: bold">{{ i18n("bpmPreview","流程概览") }}</span></span>
                <div class="processOverview-common">
                    <div class="processOverview-common-le rx-roll-container">
                        <rx-category-treeeditor
                            cat-key="BPM"
                            :statisticConfig="statisticConfig"
                            read-key="start.read"
                            :edit="false"
                            @handSelect="handSelect"
                            v-if="isShowManageTree"
                            :isAdmin="isManageToTree"
                            :treeRootList="treeRootList"
                            :isBpmClient="isBpmClient"
                            :async="true">
                        </rx-category-treeeditor>
                    </div>
                    <div class="processOverview-common-ri">
                        <div class="processOverview-common-list">
                            <div :title="item.name" class="processOverview-list" @click="startFlow(item)" v-for="(item,index) in initializeData" :key="index">
                                <div class="processOverview-list-icon"><my-icon type="iconVue3jpaas-icon_liucheng"></my-icon></div>
                                <div class="processOverview-list-name">{{item.name}}</div>
                                <my-icon v-if="!collectList[item.defId]" class="processOverview-collect" type="iconxingshi" @click.stop="setBpmCollect(item,true)"></my-icon>
                                <my-icon v-else style="color: #fe9525" class="processOverview-collect" type="iconxingshi" @click.stop="setBpmCollect(item,false)"></my-icon>
                            </div>

                        </div>
                        <a-empty style="margin-top: 30px" v-if="initializeData.length==0" />
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2"><span slot="tab"><my-icon type="icontime1" style="font-size: 16px"></my-icon><span style="font-size: 16px;font-weight: bold">{{ i18n("recentUse","最近使用") }}</span></span>
                    <div class="processOverview-common-list">
                        <div :title="item.name" class="processOverview-list" @click="startFlow(item)" v-for="(item,index) in recentUse" :key="index">
                            <div class="processOverview-list-icon"><my-icon type="iconVue3jpaas-icon_liucheng"></my-icon></div>
                            <div class="processOverview-list-name">{{item.name}}</div>
                            <my-icon v-if="!collectList[item.defId]" class="processOverview-collect" type="iconxingshi" @click.stop="setBpmCollect(item,true)"></my-icon>
                            <my-icon v-else style="color: #fe9525" class="processOverview-collect" type="iconxingshi" @click.stop="setBpmCollect(item,false)"></my-icon>
                        </div>
                    </div>
                    <a-empty style="margin:30px" v-if="recentUse.length==0" />
            </a-tab-pane>
            <a-tab-pane key="3"><span slot="tab"><my-icon type="iconcollection" style="font-size: 16px"></my-icon><span style="font-size: 16px;font-weight: bold">{{ i18n("myCollect","我的收藏") }}</span></span>
                <div class="processOverview-common-list">
                    <div :title="item.name" class="processOverview-list" @click="startFlow(item)" v-for="(item,index) in collectData" :key="index">
                        <div class="processOverview-list-icon"><my-icon type="iconVue3jpaas-icon_liucheng"></my-icon></div>
                        <div class="processOverview-list-name">{{item.name}}</div>
                        <my-icon :style="{color:collectList[item.defId]?'#fe9525':''}" class="processOverview-collect" type="iconxingshi" @click.stop="setBpmCollect(item,false)"></my-icon>
                    </div>
                </div>
                <a-empty style="margin:30px" v-if="collectData.length==0" />
            </a-tab-pane>
        </a-tabs>
        <div v-if="!loading" class="processOverview-spin">
            <a-spin style="margin: 50%" size="large" />
        </div>
    </div>
</template>

<script>
import RxCategoryTreeeditor from "@/components/redxun/rx-category-treeeditor";
import {processOverview} from "@/views/modules/column/processOverview/processOverview";
import BpmDefApi from "@/api/bpm/core/bpmDef";
import FlowUtil from "@/views/modules/bpm/js/FlowUtil";
import instAndTaskShare from "@/views/modules/bpm/core/js/instAndTaskShare";
export default {
    name: "processOverview",
    components:{
        RxCategoryTreeeditor,
    },
    mixins:[instAndTaskShare,FlowUtil],
    data(){
        return{
            statisticConfig: {
                type: "static_bpm",
                table: "BPM_DEF t",
                field: "TREE_ID_",
                whereConf: [{name: "STATUS_", type: "string", dateFormat: "", op: "=", value: "DEPLOYED"},
                    {name: "IS_MAIN_", type: "string", dateFormat: "", op: "=", value: "YES"}
                ]
            },
            initializeData:[],//流程概览初始化数据
            collectList:{},//已收藏的流程
            recentUse:[],//最近使用
            collectData:[],//我的收藏列表
            //是否分页，默认为不分页
            isPage:false,
            screenName:'',
            tabsKey:'1',
            isShowManageTree:false,
            isManageToTree:false,
            isBpmClient:true,
            readKey:"start.read",
            loading:true,
        }
    },
    created(){
      this.getBpmDefCollect();
      this.initRecentUse();
      this.initCollect();
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "ProcessPortal", key);
        },
        handSelect(curRow) {
            this.curTree = curRow;
            var treeId = curRow.treeId;
            let param = {};

            if (treeId != "0") {
                param = {Q_TREE_ID__S_EQ: treeId};
                if("rootApp"!=curRow.treeCatType){
                    param['Q_APP_ID__S_EQ']=curRow.appId;
                }
            } else {
                param = {Q_TREE_ID__S_EQ: ''};
                //顶级目录（包括平台与应用目录）
                if("rootApp"!=curRow.treeCatType){
                    param['treeCatType']='allRootApp';
                    param['treeRootList']=JSON.stringify(this.getAppList());
                }
            }
            if("rootApp"==curRow.treeCatType){
                param = {
                    'Q_TREE_ID__S_EQ': '',
                    'treeCatType':'customApp',
                    'treeRootList':JSON.stringify(this.getAppList())
                };
                if("defaultTree"==curRow.appId){
                    //顶级平台目录
                    param['treeCatType']='defaultApp';
                }else {
                    param['Q_APP_ID__S_EQ']=curRow.appId;
                }
            }
            this.loadData(param);
        },
        loadData(type){
            let params = type?type: {};
            let parameter = {
                pageNo:1,
                pageSize:20,
                sortOrder:"asc"
            }
            params['Q_NAME__S_LK']=this.screenName
            parameter['params'] = params;
            processOverview.getAllForStart(parameter,this.isPage).then(res=>{
                if(res.success){
                    this.loading = true;
                    this.initializeData = res.data;
                }
            })
        },
        getBpmDefCollect(){
            var self_=this;
            BpmDefApi.getBpmDefCollect().then(res=>{
                self_.collectList={}
                for(let data of res.data){
                    self_.collectList[data.defId]=true;
                }
            })
        },
        //启动流程
        startFlow(record) {
            this.startProcess(record.key, record.appId);
        },
        //最近使用
        initRecentUse(){
            let parameter = {
                pageNo:1,
                pageSize:10,
                sortOrder:"asc",
                params:{
                    Q_NAME__S_LK:this.screenName
                }
            }
            processOverview.getLastWeekBpmDef(parameter,this.isPage).then(res=>{
                if(res.success){
                    this.loading = true;
                    this.recentUse = res.data;
                }
            })
        },
        //我的收藏列表
        initCollect(){
            let parameter = {
                pageNo:1,
                pageSize:20,
                sortOrder:"asc",
                params:{
                    Q_NAME__S_LK:this.screenName
                }
            }
            processOverview.getCollectByCondition(parameter,this.isPage).then(res=>{
                if(res.success){
                    this.loading = true;
                    this.collectData = res.data;
                }
            })
        },
        setBpmCollect(record,isCollect){
            var self_=this
            BpmDefApi.setBpmCollect(record.defId,isCollect).then(res=>{
                self_.getBpmDefCollect();
                self_.initRecentUse();
                self_.initCollect();
            })
        },
        handClose(){
            this.loading = false
            if(this.tabsKey =='1'){
                if(this.curTree && this.curTree.treeId){
                    this.handSelect(this.curTree);
                }else {
                    let param = {
                        'Q_TREE_ID__S_EQ': '',
                        'treeCatType':'allRootApp',
                        'treeRootList':JSON.stringify(this.getAppList())
                    };
                    this.loadData(param);
                }
            }else if(this.tabsKey =='2'){
                this.initRecentUse()
            }else {
                this.initCollect();
            }
        },
    },
    watch: {
        initAppManagerEnd: function(val, oldVal) {
            let param = {
                'Q_TREE_ID__S_EQ': '',
                'treeCatType':'allRootApp',
                'treeRootList':JSON.stringify(this.getAppList())
            };
            this.loadData(param);
        },
    },
}
</script>

<style scoped>
.processOverview-spin{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9999;
}
.processOverview>>>.ant-tabs-nav .ant-tabs-tab{
    padding: 12px 16px!important;
}
.processOverview-screenName{
    width: 200px;
    height: 32px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #e8e8e8;
    display: flex;
    position: absolute;
    top: 6px;
    right: 20px;
    align-items: center;
    z-index: 9;
}
.rx-inputs{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
    padding-right: 20px;
    color: #555555;
    cursor: pointer;
}
.handClose{
    width: 40px;
    height: 32px;
    line-height: 32px;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    background-color: #4285f4;
    color: white;
    border-radius: 0px 4px 4px 0px;
    cursor: pointer;
}
.processOverview-common-list{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(148px,1fr));
    grid-gap: 10px;
}
.processOverview-list-name{
    font-size: 14px;
    color: #000000;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.processOverview-list{
    height: 40px;
    background-color: #f8f8f8;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0px 14px;
}
.processOverview-list:hover{
    background: white;
}
.processOverview-list:hover .processOverview-collect{
    display: block;
}
.processOverview-collect{
    display: none;
    font-size: 18px;
    color: rgba(6, 0, 1, 0.1);
}
.processOverview-list:hover{
    box-shadow: 0px 0px 13px 0px
    rgba(6, 0, 1, 0.17);
}
.processOverview-list-icon{
    width: 17px;
    height: 17px;
    background-color: #4285f4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: white;
    margin-right: 8px;
}
.processOverview>>>.ant-tabs-bar{
    margin-bottom: 0px!important;
}
.processOverview>>>.ant-tabs-content-animated{
    height: calc(100% - 44px) !important;
}
.processOverview {
    height: 100%;
    width: 100%;
    position: relative;
}
.processOverview-common{
    height:100%;
    width: 100%;
   overflow: auto;
    display: flex;
}
.processOverview-common-le{
    width: 210px;
    height: 100%;
    border-right: 1px solid #e8e8e8;
    padding: 10px;
}
.processOverview-common-ri{
    flex: 1;
    overflow-y: scroll;
    overflow-x: scroll;
    padding: 10px 0 0 10px;
}
.processOverview-common-ri::-webkit-scrollbar-thumb{
    display: none!important;
}
.processOverview-common-ri:hover::-webkit-scrollbar-thumb{
    display: block!important;
}
</style>